import React, { ReactElement, useRef, useState, useEffect } from 'react';
import { Button, message, Tree, TreeSelect, InputNumber, Form } from 'antd';

import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormMoney,
  ProFormRadio,
  ProFormUploadButton,
} from '@ant-design/pro-form';

// 引入 API
import { addGoods, addType } from '@/api/goods';
import { getGoodsType, getTypes } from '@/api/goodsType';
import { getServiceType } from '@/api/service-type';
interface Props {
  reload: () => void;
}

export default function AddGoods({ reload }: Props): ReactElement {
  const formRef = useRef();
  useEffect(() => {
    getSelect();
  }, []);

  // 类型初始化数据
  const [serviceTypeTreeData, setserviceTypeTreeData] = useState<getTypes[]>(
    [],
  );
  const [goodsTypeTreeData, setgoodsTypeTreeData] = useState<getTypes[]>([]);

  const getSelect = async () => {
    const res1 = await getGoodsType('' as getTypes);
    const res2 = await getServiceType('' as getTypes);
    if (res1.status && res2.status && 200) {
      setgoodsTypeTreeData(() => {
        return [...res1.data.rows.children];
      });
      setserviceTypeTreeData(() => {
        return [...res2.data.rows.children];
      });
    }
  };

  const addNewGoods = async (values: addType) => {
    const res = await addGoods(values);
    console.log('addgoods', res);
    if (res.status === 200) {
      reload();
      message.success('新增成功');
    } else {
      message.error('新增失败');
    }
  };

  return (
    <DrawerForm<addType>
      title="新增商品"
      formRef={formRef}
      trigger={<Button style={{ marginRight: '20px' }}>新增商品</Button>}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        const res = await addNewGoods(values);

        // if (res.status === 200) {
        //   message.success('提交成功');
        // }
        return true;
      }}
      width={500}
    >
      <ProFormText
        name="name"
        // width="md"
        width={400}
        label="商品名称："
        placeholder="请输入名称"
      />
      <Form.Item label="商品类型" name="goodstypeId">
        <TreeSelect
          style={{ width: 400 }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={goodsTypeTreeData}
          placeholder="Please select"
        />
      </Form.Item>
      <Form.Item label="服务类型" name="serviceTypeId">
        <TreeSelect
          style={{ width: 400 }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={serviceTypeTreeData}
          placeholder="Please select"
        />
      </Form.Item>
      <ProFormText
        name="describe"
        // width="md"
        width={400}
        label="描述："
        placeholder="请输入名称"
      />
      <Form.Item label="价格" colon={true} name="price">
        <InputNumber />
      </Form.Item>

      <Form.Item label="数量" name="counts">
        <InputNumber />
      </Form.Item>
      <ProFormRadio.Group
        name="status"
        label="状态"
        options={[
          {
            label: '上架',
            value: '0',
          },
          {
            label: '下架',
            value: '1',
          },
        ]}
      />
      <ProFormUploadButton
        name="upload"
        label="商品图片"
        max={1}
        fieldProps={{
          name: 'file',
          listType: 'picture-card',
        }}
        action="/upload.do"
      />
    </DrawerForm>
  );
}
